/**
*
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>常见问题</el-breadcrumb-item>
    </el-breadcrumb>
    <NoPermission
      v-if="!authFilter(permissionObj, 'index')">
    </NoPermission>

    <div v-else>
      <!-- 搜索筛选 -->
      <el-form :inline="true" :model="formInline" class="mgt16">
        <el-form-item  label="搜索：" prop="model">
          <el-select size="small" v-model="formInline.model" placeholder="型号" clearable
                     filterable>
            <el-option v-for="type in modelList" :label="type.label" :value="type.label" :key="type.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""  prop="language">
          <el-select size="small" v-model="formInline.language" placeholder="语言" clearable
                     filterable
                     @change="changeLanguageSearch">
            <el-option v-for="type in languageList" :label="type.label" :value="type.value" :key="type.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="questionCategory">
          <!-- 问题模块关联 -->
          <el-select-tree
            v-if="showTree"
            placeholder="请选择问题模块"
            :language="formInline.language"
            :disabled="!formInline.language"
            :clearable="true"
            :props="defaultPropsEdit"
            :multiple="false"
            :valueMultiple="valueMultipleSearch"
            @getValue="getSelectedValueSearch">
          </el-select-tree>
        </el-form-item>
        <el-form-item prop="faq">
          <el-select size="small" v-model="formInline.faq" placeholder="FAQ分类" clearable
                     filterable>
            <el-option
              v-for="type in faqList"
              :label="type.label"
              :value="type.label"
              :key="type.value">
            </el-option>
          </el-select>
        </el-form-item>
<!--        <el-form-item prop="publishStatus">-->
<!--          <el-select size="small" v-model="formInline.publishStatus" placeholder="发布状态" clearable-->
<!--                     filterable>-->
<!--            <el-option-->
<!--              v-for="type in publishStatusList"-->
<!--              :label="type.label"-->
<!--              :value="type.value"-->
<!--              :key="type.value">-->
<!--            </el-option>-->
<!--          </el-select>-->
<!--        </el-form-item>-->
        <el-form-item prop="problem">
          <el-input size="small" v-model="formInline.problem" placeholder="请输入问题" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit(null, {},true)"
                     v-if="authFilter(permissionObj, 'add')">添加</el-button>
          <el-button
            size="small"
            type="primary"
            @click="routerPush('/feedback/labelSetting?fromPage=problemList&labelTitle=常见问题&labelPath=/feedback/problemList')"
            v-if="authFilter(permissionObj, 'label')">
            标签设置
          </el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <div class="relative">
        <table-top
          :upLoadRequest="upLoadRequestImport"
          @uploadRequestSuccess="uploadRequestSuccess"
          uploadTitle="批量导入"
          :showCheck="authFilter(permissionObj, 'excelExportCheck')"
          :showResult="authFilter(permissionObj, 'excelExportResult')"
          :showUpLoadExcel="authFilter(permissionObj, 'batchImport')"
          :refCustom="refCustom"
          :sheetLast="sheetLast"
          :formInline="formInline"
          :exportExcelInfo="exportExcelInfo"
          :exportExcelArray="exportExcelArray"
          :exportExcelHead="exportExcelHead"
          :multipleSelection="multipleSelection"
          :exportExcelRequest="exportExcelRequest"
          :showSummary="showSummary"
          :summaryList="summaryList"
          :isSubtotal="isSubtotal"
          :mergeCells="mergeCells"
          :mergeName="mergeName"
          :showRedList="showRedList"
          :showGreenList="showGreenList"
          :showOrangeList="showOrangeList"
          :customColor="customColor"
          :customGreen="customGreen"
          :customOrange="customOrange"
          @onSuccess="onSuccess">
          <template slot="left">
            <el-button
              size="small" type="primary" icon="el-icon-refresh-left"
              @click="batchPublishing"
              v-if="authFilter(permissionObj, 'batchPublishing')">
              批量发布
            </el-button>
          </template>
          <template slot="right">
            <el-button
              size="small" type="primary" icon="el-icon-download"
              @click="downUrl(problemImportTemplate)"
              v-if="problemImportTemplate&&authFilter(permissionObj, 'batchImport')">
              下载批量导入模板
            </el-button>
          </template>
        </table-top>
        <div class="relative">
          <el-table
            :header-cell-style="{'font-weight': '600', 'color':'#333'}"
            size="small"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            :height="tableHeight"
            :row-height="rowHeight"
            use-virtual
            border
            element-loading-text="拼命加载中"
            style="width: 100%;"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            :span-method="objectSpanMethod"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <!--      展开行      -->
            <el-table-column type="expand"
              v-if="false">
              <template slot-scope="scope">
                <el-form label-position="left" inline class="table-expand">
                  <el-form-item label="创建时间">
                    <span>{{scope.row.createTime|timestampToDay}}</span>
                  </el-form-item>
                  <el-form-item label="修订时间">
                    <span>{{scope.row.updateTime|timestampToDay}}</span>
                  </el-form-item>
                  <el-form-item label="创建人">
                    <span>{{ scope.row.founder }}</span>
                  </el-form-item>
                  <el-form-item label="发布时间">
                    <span>{{ scope.row.publishTime|timestampToDay }}</span>
                  </el-form-item>
                  <el-form-item label="总访问量">
                    <span>{{ scope.row.totalVisits }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="selection"
              align="center"
              type="selection"
              width="40">
            </el-table-column>
            <el-table-column
              align="center"
              prop="no"
              width="60"
              label="NO.">
            </el-table-column>
            <el-table-column align="center" prop="problem" label="问题" min-width="100px">
              <template slot-scope="scope">
                <el-tooltip class="item curPer" effect="light" :content="scope.row.problem" placement="top">
                  <div class="ell blue-color">
                    {{scope.row.problem}}
                  </div>
                </el-tooltip>
              </template>
            </el-table-column>
<!--            <el-table-column align="center" prop="answer" label="回答" width="140px">-->
<!--              <template slot-scope="scope">-->
<!--                <div class="ell">-->
<!--                  <c-rich-text :content="scope.row.answer"></c-rich-text>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column align="center" prop="questionCategory" label="问题模块" min-width="100px">
            </el-table-column>
            <el-table-column align="center" prop="faq" label="FAQ分类" min-width="70px">
            </el-table-column>
            <el-table-column align="center" prop="model" label="型号" min-width="100px">
            </el-table-column>
            <el-table-column align="center" prop="language" label="语言" min-width="70px">
            </el-table-column>
            <el-table-column align="center" prop="createTime" label="创建时间" min-width="80px">
              <template slot-scope="scope">
                <div>{{scope.row.createTime|timestampToDay}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="updateTime" label="修订时间" min-width="80px">
              <template slot-scope="scope">
                <div>{{scope.row.updateTime|timestampToDay}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="founder" label="创建人" min-width="80px">
            </el-table-column>
            <el-table-column align="center" prop="updateTime" label="发布时间" min-width="80px">
              <template slot-scope="scope">
                <div>{{scope.row.publishTime|timestampToDay}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="publishStatusName" label="发布状态" min-width="70px">
              <template slot-scope="scope">
                <div
                     :class="{'redColor':scope.row.showRed,'greenColor':scope.row.showGreen,'colorf2':scope.row.showOrange,}">
                  {{scope.row.publishStatusName}}
                </div>
              </template>
            </el-table-column>
<!--            <el-table-column align="center" prop="resolutionAmount" label="已解决数" min-width="100px">-->
<!--            </el-table-column>-->
            <el-table-column align="center" prop="totalVisits" label="总访问量" min-width="70px">
            </el-table-column>
            <el-table-column align="center" prop="resolutionRate" label="解决率" min-width="70px">
            </el-table-column>
            <el-table-column align="right" label="操作" :min-width="operaWidth">
              <template slot-scope="scope"
                        v-if="listData&&listData.length>0">
                <el-button size="mini" type="primary" @click="problemTop(scope.index,scope.row)"
                           v-if="authFilter(permissionObj, 'top')&&['已发布'].includes(scope.row.publishStatusName)">
                  置顶
                </el-button>
                <el-button size="mini" type="danger" plain @click="problemCancelTopping(scope.index,scope.row)"
                           v-if="authFilter(permissionObj, 'cancelTopping')&&['已置顶'].includes(scope.row.publishStatusName)">
                  取消置顶
                </el-button>
                <el-button size="mini" type="primary" @click="handleEdit(scope.index,scope.row,false)"
                           v-if="authFilter(permissionObj, 'update')">更新</el-button>
                <el-button size="mini" type="danger" @click="deleteProblem(scope.$index, scope.row)"
                           v-if="authFilter(permissionObj, 'delete')">删除</el-button>
                <el-button size="mini" type="success"
                           @click="publishing(scope.row.id)"
                           v-if="authFilter(permissionObj, 'publishing')&&scope.row.publishStatus==0">发布</el-button>
                <el-button size="mini" type="danger"
                           @click="batchOff(scope.row.id)"
                           v-if="authFilter(permissionObj, 'off')&&[1,2].includes(scope.row.publishStatus)">下架</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>

    <!-- 编辑界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="85%" @click="closeDialog('editForm')"
               style="margin-left: 200px;">
      <el-form label-width="80px" class="edit-class" :model="editForm" :rules="rules" ref="editForm">
        <el-row>
          <el-col :span="12">
            <el-form-item label="问题" prop="problem">
              <el-input size="small" v-model="editForm.problem" auto-complete="off" placeholder="请输入问题"
                        clearable></el-input>
            </el-form-item>
            <el-form-item label="FAQ分类" prop="faq">
              <el-select size="small" v-model="editForm.faq" placeholder="选择FAQ分类" clearable
                         filterable
              @change="changeFAQ">
                <el-option v-for="type in faqList" :label="type.label" :value="type.label" :key="type.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="上传图片" prop="imagesList">
              <c-upload-sec
                v-if="editFormVisible"
                :deleteServe="isAdd?true:false"
                :previewShow="true"
                v-model="editForm.imagesList"
                :max="9"
                :filename="filename"
                itemStyles="width: 40px;height: 40px;margin: 0 8px 8px 0;"
                @complete="getPhoto"
              >
                <template slot="add">
                  <img class="img40" src="@/assets/img/add_card.png" />
                </template>
              </c-upload-sec>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <!--新增语言-->
            <el-form-item label="语言" prop="language">
              <el-select
                size="small"
                v-model="editForm.language" placeholder="选择语言" clearable
                filterable
                @change="changeLanguage">
                <el-option
                  v-for="type in languageList"
                  :label="type.label"
                  :value="type.value"
                  :key="type.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="型号" prop="model">
              <el-select size="small" v-model="editForm.model" placeholder="选择型号" clearable
                         filterable>
                <el-option v-for="type in modelList" :label="type.label" :value="type.label" :key="type.type"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="问题模块" prop="questionCategory">
              <!-- 问题模块关联 -->
              <el-select-tree
                v-if="editFormVisible&&showTree"
                placeholder="请选择问题模块"
                :language="editForm.language"
                :disabled="!editForm.language"
                :clearable="true"
                :props="defaultPropsEdit"
                :multiple="false"
                :valueMultiple="valueMultiple"
                :defaultCheckedKeys="defaultCheckedKeys"
                @getValue="getSelectedValue">
              </el-select-tree>
              <!--              <el-select size="small" v-model="editForm.questionCategory" placeholder="选择问题模块" clearable-->
              <!--                         filterable>-->
              <!--                <el-option v-for="type in questionCategoryList" :label="type.label" :value="type.label" :key="type.type"></el-option>-->
              <!--              </el-select>-->
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="回答" prop="answer">
<!--          <el-input type="textarea" v-model="editForm.answer" placeholder="请输入回答"-->
<!--                    :autosize="{ minRows: 2, maxRows: 6 }">-->
<!--          </el-input>-->
          <custom-quill-editor
            v-if="editFormVisible"
            :content="editForm.answer"
            @onEditorChange="onEditorChange">
          </custom-quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
// 输入建议
import AutoCompleteCustom from "@/components/AutoCompleteCustom.vue"
import TableTop from "@/components/table-top.vue"
import {mapGetters, mapState} from "vuex";
//上传excel
import UploadFile from "@/components/UploadFile.vue"
import cUploadSec from '@/components/c-upload-sec';
// 选择部门
import config from "@/api/config.js";
import * as dd from 'dingtalk-jsapi' // 此方式为整体加载，也可按需进行加载
import CustomQuillEditor from "@/components/custom-quill-editor.vue"
//下拉树形组件
import elSelectTree from '@/components/SelectTree'

import reportMin from "@/views/tatisticalReport/tatisticalReport.js"
export default {
  // 注册组件
  components: {
    Pagination,
    AutoCompleteCustom,
    TableTop,
    UploadFile,
    CustomQuillEditor,
    cUploadSec,
    //下拉树形组件
    elSelectTree,
  },
  mixins:[reportMin],
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '',
      editForm: {
        id: '',
        problem: '',
        answer: '',
        questionCategory: '',
        imagesList: '',
        model: '',
        founder: '',
        faq: '',
        //问题模块关联
        moduleId: '',
        modulePid: '',
        //新增语言
        language:'',
      },
      filename:'problem',
      isAdd: false,
      // rules表单验证
      rules: {
        problem: [{ required: true, message: '请输入问题', trigger: 'blur' }],
        answer: [{ required: true, message: '请输入答案', trigger: 'blur' }],
        questionCategory: [{ required: true, message: '请选择问题模块', trigger: 'change' }],
        faq: [{ required: true, message: '请选择FAQ分类', trigger: 'change' }],
        model: [{ required: false, message: '请选择型号', trigger: 'change' }],
        //新增语言
        language: [{ required: true, message: '请选择语言', trigger: 'change' }],
        // imagesList: [{ required: true, message: '请上传图片文件', trigger: 'change' }],
      },
      //新增语言
      languageList:[],
      formInline: {
        page: 1,
        pagenum: 30,
        problem: '',
        questionCategory: '',
        language: '',
        model: '',
        //问题模块关联
        moduleId: '',
        modulePid: '',
        faq: '',
        publishStatus: '',
      },
      modelList: [],
      faqList: [{
        value: 1,
        label: '通用',
      },
        {
          value: 2,
          label: '专属',
        }
      ],
      questionCategoryList: [],
      publishStatusList: [
        {
          value: 0,
          label: '未发布',
        },
        {
          value: 1,
          label: '已发布',
        },
        {
          value: 2,
          label: '已置顶',
        }
      ],
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 30,
        total: 30
      },
      // 虚拟列表 start
      rowHeight: 40,
      tableHeight: window.innerHeight - 302,
      // tableHeight: document.documentElement.clientHeight - 254, // 表的高度
      // 虚拟列表 end
      // 导出表格start
      // 是否合并小格
      mergeCells: false,
      //合并表格名称
      mergeName: 'id',
      // 导出自定义字体颜色所属字段
      showRedList: ['是','未发布'],
      showGreenList: ['已发布'],
      showOrangeList: ['已置顶'],
      // 导出自定义字体颜色
      customColor: 'D63640',
      customGreen: '1AD96F',
      customOrange: 'f2b400',
      // 是否小计
      isSubtotal: false,
      // 是否显示统计
      showSummary: false,
      // 统计字段列表
      summaryList: ['balance'],
      // 表格列最后一列，有边框样式，手动去掉
      sheetLast: '',
      // 导出数据接口
      exportExcelRequest:'problemList',
      //导出表格字段及formatter信息
      exportExcelArray: [
        // {
        //   prop: 'id',
        //   label: 'id',
        //   formatterFlag: false,
        //   align: 'center',
        // },
        {
          prop: 'no',
          label: 'NO.',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'problem',
          label: '问题',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'questionCategory',
          label: '问题模块',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'faq',
          label: 'FAQ分类',
          formatterFlag: false,
          align: 'center',
        },
        {
          prop: 'model',
          label: '型号',
          formatterFlag: false
        },
        //新增语言
        {
          prop: 'language',
          label: '语言',
          formatterFlag: false
        },
        {
          prop: 'createTime',
          label: '创建时间',
          formatterFlag: true,
          formatterType: 'time-type',
        },
        {
          prop: 'updateTime',
          label: '修订时间',
          formatterFlag: true,
          formatterType: 'time-type',
        },
        {
          prop: 'founder',
          label: '创建人',
          formatterFlag: false
        },
        {
          prop: 'updateTime',
          label: '发布时间',
          formatterFlag: true,
          formatterType: 'time-type',
        },
        {
          prop: 'publishStatus',
          label: '发布状态',
          formatterFlag: true,
          formatterType: 'common-type',
          formatterInfo: [
            {
              value: 0,
              label: '未发布',
            },
            {
              value: 1,
              label: '已发布',
            },
            {
              value: 2,
              label: '已置顶',
            }
          ]
        },
        {
          prop: 'totalVisits',
          label: '总访问量',
          formatterFlag: false
        },
        {
          prop: 'resolutionRate',
          label: '解决率',
          formatterFlag: false
        },
        // {
        //   prop: 'resolutionAmount',
        //   label: '已解决数',
        //   formatterFlag: false
        // },
      ],
      // 导出excel表格宽高列表
      exportExcelHead:[
        // { wpx: 60, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        //新增语言
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
      ],
      //导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: 'Lend',
        excelName: '常见问题列表记录.xlsx'
      },
      //需要导出的table的选择数据
      multipleSelection: [],
      refCustom: 'myChild',

      // 上传文件
      // 更新报表上传接口
      upLoadRequest: "problemList",

      // 防重复点击
      allowRequest: true,
      // 更新报表上传接口
      upLoadRequestImport: "problemImport",
      problemImportTemplate: '',

      //问题模块关联
      // 下拉树形组件
      valueMultipleSearch: [],
      valueMultiple: [],
      defaultCheckedKeys: [],
      defaultPropsEdit: {
        children: "child",
        label: "name",
        disabled: function (data, node) {//带子级的节点不能选中
          if (data.child && data.child.length > 0) {
            return true
          } else {
            return false
          }
        }
      },
      showTree: true,
      languageOld: '',

    }
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    const vm = this
    // vm.questioncategoryListGet()
    vm.phonemodelList()
    //新增语言
    vm.languageListGet()
    vm.getData(this.formInline)
  },
  computed:{
    ...mapGetters(['userAuthList', 'userInfo']),
    permissionObj(){
      if(this.userAuthList&&this.userAuthList.length>0){
        return this.authListFilter(this.userAuthList,'customManagement', 'problemList')
      }
    },
    // 操作列表宽度
    operaWidth(){
      const vm = this
      const minWidth = 120
      let len1 = vm.authFilterLen(this.permissionObj, 'update', 'delete', 'top').length
      let len2 = vm.authFilterLen(this.permissionObj, 'update', 'delete', 'cancelTopping').length
      let len = len1> len2 ? len1 : len2
      return len > 0 ? vm.multiply(len+1,75) : minWidth
    }
  },
  // 虚拟列表 start
  mounted() {
    /** 控制table的高度 */
    const vm = this
    // resize窗口节流
    window.addEventListener("resize", vm.throttleNew(vm.updateTableHeight, 300))
  },
  // vue设置列表高度自适应和show-summary的冲突
  updated() {
    const vm = this
    if(vm.showSummary){
      vm.$nextTick(()=>{
        vm.$refs['multipleTable'].doLayout()
      })
    }
  },
  beforeDestroy() {
    const vm = this
    window.removeEventListener('resize', vm.updateTableHeight)
  },
  // 虚拟列表 end

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 虚拟列表 start
    /**
     * 虚拟列表 更新表高
     */
    updateTableHeight() {
      const vm = this
      // console.log('vm.tableHeight', vm.tableHeight)
      const offsetHei = document.documentElement.clientHeight
      // const removeHeight = this.filterObj.length > 0 ? 285 : 254
      const removeHeight = 254
      vm.tableHeight = offsetHei - removeHeight
    },
    // 虚拟列表 end
    // 带输入建议
    handleSelect(item) {
      this.formInline.dept = item.value
    },
    //获取问题模块
    questioncategoryListGet(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.questioncategoryListGet()
        .then(res => {
          const { code, data = [], msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data){
              this.questionCategoryList = data;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'questionCategory'){
                    item.formatterInfo = vm.questionCategoryList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
          }
        })
    },
    //获取型号
    phonemodelList(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.phonemodelList()
        .then(res => {
          const { code, data = [], msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data){
              this.modelList = data;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'model'){
                    item.formatterInfo = vm.modelList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
          }
        })
    },
    //获取语言列表
    languageListGet(){
      let vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.$store.dispatch('languageListGet', {},"POST")
        .then(res => {
          const { code, data = [], msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data&&data.length>0){
              this.languageList = data;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'language'){
                    item.formatterInfo = vm.languageList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
          }
        })
    },
    // 获取常见问题列表
    getData(parameter) {
      const vm = this

      vm.loading = true

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.apiUrl[vm.exportExcelRequest](parameter,"POST")
        .then(res => {
          vm.loading = false
          const { data:{list=[],totalnum, problemImportTemplate},code, msg } = res
          if (code != 0) {
            vm.showMessageMin({
              message: msg,
              type: 'error',
            })
          } else {
            const arr = list.map((item)=>{
              const publishStatusList = vm.publishStatusList.filter(pItem=>pItem.value == item.publishStatus)
              return {
                ...item,
                showRed: [0].includes(item.publishStatus),
                showGreen: [1].includes(item.publishStatus),
                showOrange: [2].includes(item.publishStatus),
                publishStatusName: publishStatusList&&publishStatusList[0]&&publishStatusList[0].label ? publishStatusList[0].label : ''
              }
            })
            // vm.listData = arr
            // 合并小格
            vm.listData = vm.groupBy(arr, vm.mergeName)
            vm.problemImportTemplate=problemImportTemplate
            // 分页赋值
            vm.pageparm.currentPage = vm.formInline.page
            vm.pageparm.pageSize = vm.formInline.pagenum
            vm.pageparm.total = totalnum
          }
        })
        .catch(err => {
          if(err&&err.isCancel) return
          vm.loading = false
        })
    },
    // 分页插件事件
    callFather(parm) {
      const vm = this
      vm.formInline = {
        ...vm.formInline,
        page: parm.currentPage,
        pagenum: parm.pageSize
      }
      vm.getData(vm.formInline)
    },
    // 搜索事件
    search() {
      const vm = this
      vm.formInline = {
        ...vm.formInline,
        page: 1
      }
      vm.getData(vm.formInline)
    },
    //显示编辑(批量编辑)编辑界面
    onEditorChange(e){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        answer: e.content
      }
    },
    async handleEdit(index, row, isAdd) {
      const vm = this
      vm.isAdd = isAdd;
      vm.title = vm.isAdd ? '添加常见问题' : '修改常见问题'
      await  this.sleep(100)
      if(vm.isAdd){
        vm.editForm = {}
        //问题模块关联
        vm.valueMultiple = []
        vm.defaultCheckedKeys = []
        vm.editForm = {
          ...vm.editForm,
          createTime: new Date().getTime(),
          updateTime: new Date().getTime(),
        }
        vm.$nextTick(()=>{
          vm.clearValidate('editForm')
        })
      } else {
        vm.editForm = {
          ...row
        }
        //问题模块关联
        vm.valueMultiple=[{
          ...vm.editForm,
          "name": row.questionCategory
        }]
        vm.defaultCheckedKeys = [vm.editForm.moduleId]
        vm.languageOld = vm.editForm.language
      }
      vm.showTree = true
      vm.editFormVisible = true
    },
    // 显示编辑(批量编辑)编辑界面保存方法
    submitForm(editData) {
      const vm = this
      vm.$refs[editData].validate(valid => {
        if (valid) {
          let request = null
          vm.editForm = {
            ...vm.editForm,
            founder: vm.userInfo.userName
          }
          if(vm.isAdd){
            request = vm.apiUrl.problemAdd(vm.editForm,"POST")
          }else {
            request = vm.apiUrl.problemEdit(vm.editForm,"POST")
          }
          vm.openFullScreen()
          request.then(res => {
            vm.closeFullScreen(vm.openFullScreen());
            const { code, msg } = res
            if (code != 0) {
              vm.showMessageMin({
                message: msg,
                type: 'error',
              })
            } else {
              if(vm.isAdd){
                vm.editForm = {}
                vm.editForm = {
                  ...vm.editForm,
                  answer: '',
                }
              }
              vm.editFormVisible = false
              vm.showMessageMin({
                message: vm.title+'成功！',
                type: 'success',
              })
              vm.getData(vm.formInline)
            }
          })
            .catch(err => {
              if(err&&err.isCancel) return
              vm.editFormVisible = false
              vm.closeFullScreen(vm.openFullScreen());
              vm.showMessageMin({
                message: vm.title+'失败，请稍后再试！',
                type: 'error',
              })
            })
        } else {
          return false
        }
      })
    },
    // 删除
    deleteProblem(index, row) {
      const vm = this
      vm.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          vm.openFullScreen()
          const param = {
            id: row.id
          }
          vm.apiUrl.problemDelete(param,"POST")
            .then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code, msg } = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '已删除!',
                  type: 'success',
                })
                vm.getData(vm.formInline)
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
        })
        .catch(() => {
          vm.showMessageMin({
            message: '已取消删除',
            type: 'info',
          })
        })
    },
    // 置顶
    problemTop(index, row) {
      const vm = this
      const param = {
        id: row.id
      }
      vm.$confirm('确定要置顶吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          vm.openFullScreen()
          vm.apiUrl.problemTop(param,"POST")
            .then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code, msg } = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '已置顶!',
                  type: 'success',
                })
                vm.getData(vm.formInline)
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
        })
        .catch(() => {
          vm.showMessageMin({
            message: '置顶已取消',
            type: 'info',
          })
        })
    },
    // 取消置顶
    problemCancelTopping(index, row) {
      const vm = this
      const param = {
        id: row.id
      }
      vm.$confirm('确定要取消置顶吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          vm.openFullScreen()
          vm.apiUrl.problemCancelTopping(param,"POST")
            .then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code, msg } = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '取消置顶成功!',
                  type: 'success',
                })
                vm.getData(vm.formInline)
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
        })
        .catch(() => {
          vm.showMessageMin({
            message: '取消置顶已取消',
            type: 'info',
          })
        })
    },
    // 关闭编辑、增加弹出框
    clearValidate(formName){
      if(!this.$refs[formName]) return
      this.$refs[formName].clearValidate()
      if(!this.isAdd){
        this.languageOld = ''
      }
    },
    //同时清除表单数据或重置表单状态
    clearForm(formName) {
      // 清空表单数据或重置表单状态的操作

      // 示例1：清空表单数据
      Object.keys(this[formName]).forEach((key) => {
        this[formName][key] = '';
      });

      // 示例2：重置表单状态（包括校验）
      if (this.$refs[formName] !== undefined && typeof this.$refs[formName].resetFields === 'function') {
        this.$refs[formName].resetFields();
      }
      if(!this.isAdd){
        this.languageOld = ''
      }
    },
    closeDialog(formName) {
      this.resetForm(formName);
      this.editFormVisible = false
      // this.$refs[formName].close(); // 关闭弹框
    },
    //导出excel
    // 上传excel成功
    async onSuccess(data) {
      // console.log(data);
      const vm = this
      // 数据库的key为英文，我们上传的key为中文，需要一一转化
      const userRelations = Object.fromEntries(vm.exportExcelArray.map((item)=>{
        return [item.label,item.prop]
      }))
      console.log('obj', obj)
      // 将key值一一对应
      const newArr = data.results.map((item) => {
        let userInfo = {};
        Object.keys(item).forEach((key) => {
          if(userRelations[key]){
            userInfo[userRelations[key]] = item[key];
          }
          // userInfo[userRelations[key]] = item[key];
        });
        return userInfo;
      });

      // const newArr = data.results

      console.log(newArr);
      const param = {
        excelFrom: 'BillingPlan',
        excelList: newArr,
      }
      //   await importEmployee(param); // 调用上传接口
      vm.showMessageMin({
        message: '上传文件成功',
        type: 'success',
      })
      vm.isShow = false;
    },
    // 获取上传文件
    getUrlList(arr){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        imagesList: arr,
      }
      console.log('vm.editForm', vm.editForm)
    },
    resetForm(formName) {
      const vm = this
      if(!vm.$refs[formName]) return
      vm.$refs[formName].resetFields();
    },
    publishing(id){
      const vm = this;
      if(!vm.allowRequest) return;
      vm.openFullScreen()
      vm.allowRequest = false
      let request = vm.apiUrl.batchPublishing({
        "id": id
      },"POST")
      request.then(res => {
        vm.closeFullScreen(vm.openFullScreen());
        const { code, msg } = res;
        if (code == 0) {
          vm.showMessageMin({
            message: '发布成功!',
            type: 'success',
          })
          vm.getData(vm.formInline)
        } else {
          vm.showMessageMin({
            message: msg,
            type: 'error',
          })
        }
      }).finally(()=>{
        vm.sleep(1500).then(()=>{
          vm.allowRequest = true
        })
      })
    },
    // 批量发布
    batchPublishing(){
      const vm = this;
      if(!vm.allowRequest) return;
      if(vm.multipleSelection.length == 0){
        vm.$message.error('请勾选操作项')
        return;
      }
      const idsArr =  vm.multipleSelection.filter((item)=>item.publishStatus==0)
      if(idsArr.length == 0){
        vm.$message.error('请勾选操作项')
        return;
      }
      //将选中项传给this.tableAllData
      //测试数组导出
      const ids = idsArr.map((item)=>{
        return item.id
      })
      vm.openFullScreen()
      vm.allowRequest = false
      let request = vm.apiUrl.batchPublishing({
        "ids": ids
      },"POST")
      request.then(res => {
        vm.closeFullScreen(vm.openFullScreen());
        const { code, msg } = res;
        if (code == 0) {
          vm.showMessageMin({
            message: '批量发布成功!',
            type: 'success',
          })
          vm.getData(vm.formInline)
        } else {
          vm.showMessageMin({
            message: msg,
            type: 'error',
          })
        }
      }).finally(()=>{
        vm.sleep(1500).then(()=>{
          vm.allowRequest = true
        })
      })
    },
    //下架
    batchOff(id){
      const vm = this;
      if(!vm.allowRequest) return;
      vm.openFullScreen()
      vm.allowRequest = false
      let request = vm.apiUrl.batchOff({
        "id": id
      },"POST")
      request.then(res => {
        vm.closeFullScreen(vm.openFullScreen());
        const { code, msg } = res;
        if (code == 0) {
          vm.showMessageMin({
            message: '下架成功!',
            type: 'success',
          })
          vm.getData(vm.formInline)
        } else {
          vm.showMessageMin({
            message: msg,
            type: 'error',
          })
        }
      }).finally(()=>{
        vm.sleep(1500).then(()=>{
          vm.allowRequest = true
        })
      })
    },
    // 接口上传文件成功
    uploadRequestSuccess(){
      this.getData(this.formInline)
    },
    getPhoto(e){
      this.editForm.imagesList = e;
      // console.log("this.editForm.imagesList",this.editForm.imagesList)
    },
    changeFAQ(val){
      const vm = this
      if(val == '通用'){
        vm.rules.model[0].required = false
      }else {
        vm.rules.model[0].required = true
      }
      console.log(vm.rules)
    },
    //问题模块关联
    //下拉树形组件
    getSelectedValue (value) {
      console.log('选中的结果值', value)
      const vm = this
      if(value){
        vm.editForm = {
          ...vm.editForm,
          questionCategory: value.name,
          moduleId: value.id,
          modulePid: value.pid
        }
      }else {
        vm.editForm = {
          ...vm.editForm,
          questionCategory: '',
          moduleId: '',
          modulePid: ''
        }
      }
    },
    getSelectedValueSearch (value) {
      console.log('选中的结果值', value)
      const vm = this
      if(value && value.length!=0 && typeof value != "undefined"){
        vm.formInline = {
          ...vm.formInline,
          questionCategory: value.name,
          moduleId: value.id,
          modulePid: value.pid
        }
        vm.valueMultipleSearch = [...vm.formInline.questionCategory]
      }else {
        this.$nextTick(()=> {
          vm.formInline = {
            ...vm.formInline,
            questionCategory: '',
            moduleId: '',
            modulePid: ''
          }
          vm.valueMultipleSearch = []
        })
      }
    },
    changeLanguageSearch(e){
      const vm = this
      // console.log('changeLanguage',e)
      vm.showTree = false
      //问题模块关联
      vm.valueMultipleSearch = []
      vm.formInline = {
        ...vm.formInline,
        language: e
      }
      vm.$nextTick(()=>{
        vm.showTree = true
      })
    },
    changeLanguage(e){
      const vm = this
      // console.log('changeLanguage',e)
      vm.showTree = false
      //问题模块关联
      vm.valueMultiple = []
      vm.defaultCheckedKeys = []
      if(vm.languageOld == e){
        //问题模块关联
        vm.valueMultiple=[{
          ...vm.editForm,
          "name": vm.editForm.questionCategory
        }]
        vm.defaultCheckedKeys = [vm.editForm.moduleId]
      }
      vm.editForm = {
        ...vm.editForm,
        language: e
      }

      vm.$nextTick(()=>{
        vm.showTree = true
      })
    },

  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/table.less';
// 内容主体高度
/deep/ .ql-toolbar.ql-snow + .ql-container.ql-snow{
  min-height: 300px;
}
/deep/ .ql-snow .ql-color-picker .ql-picker-label, .ql-snow .ql-icon-picker .ql-picker-label{
  display: flex;
  align-items: center;
}
/deep/ .ql-snow .ql-picker{
  height: 100%;
}
</style>
